<template>
    <div id="app">
        <Child :title="msg" @child-click="handlerChildClick"/>
        <ToDoList @add-list="addList" @remove-all="removeAll" />
        <div class="box">
            <ul v-for="(item, index) in listData" :key="index">
                <li>{{index+1}}--{{item}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
import {ref} from "vue";
import Child from './components/Child.vue';
import ToDoList from './components/ToDoList.vue';
export default {
    components: {Child, ToDoList},
    setup() {
        const msg = ref('我是父组件的值');
        const listData = ref([]);

        const handlerChildClick = msg => {
            alert(msg);
        };
        //添加数据
        const addList = value => {
            listData.value.push(value);
        }
        //重置清单
        const removeAll=()=> {
            listData.value=[];
        }
        return {
            msg,
            listData,
            handlerChildClick,
            addList,
            removeAll
        }
    }
}
</script>